<template>
  <div>
    <div class="modal">
      <el-input placeholder="请输入用户名" v-model="content.username" clearable>
      </el-input>
      <el-input placeholder="请输入密码" v-model="content.password" clearable>
      </el-input>
      <div class="rowbutton">
        <el-button type="primary" plain @click="confirm">确定</el-button>
        <el-button type="info" plain @click="concel">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

// 创建一个Axios实例，指定基础URL
const instance = axios.create({
  baseURL: "http://localhost:8080",
});

const options = {
  components: {},
  data: function () {
    return {
      content: {
        username: "",
        password: "",
      },
      token: "",
    };
  },
  mounted() {},

  methods: {
    confirm() {
      instance
        .post("/login", this.content)
        .then((response) => {
          this.token = response.data.data;
          if (this.token) {
            this.$router.push({
              name: "Main",
              params: {
                token: this.token,
              },
            });
          }
        })
        .catch((error) => {
          console.error(
            "There has been a problem with your Axios operation:",
            error
          );
        })
        .finally(() => {
          this.content = {};
          this.token = "";
        });
    },
    concel() {
      this.content = {};
      this.token = "";
    },
  },

  computed: {},
};
export default options;
</script>

<style scoped>
.modal {
  /* 模态框样式 */
  padding: 20px 40px 0 40px;
  border-radius: 20px;
  z-index: 3;
  background-color: rgb(224, 231, 244);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 其他样式 */
}
.rowbutton {
  padding: 20px;
  display: flex;
  justify-content: center;
}
</style>